<template>
  <div>
    <el-dialog class="user-choose-dialog" title="分配人员"
      :close-on-click-modal="closeOnclickModal" :visible.sync="isDialogShow" width="50%" @close="closeDialog">
      <el-tabs type="card" v-model="activeTabName" @tab-click="handleTabsClick">
        <el-tab-pane label="组织筛选" name="org"></el-tab-pane>
        <!--<el-tab-pane label="标签筛选" name="tag"></el-tab-pane>-->
      </el-tabs>
      <div class="choose-dialog-content">
        <div class="left">
          <div v-show="isShowOrg">
            <el-form ref="treeSearchForm" :inline="true" :model="treeSearchForm" :size="size">
              <el-form-item prop="keyword">
                <el-input v-model="treeSearchForm.keyword" placeholder="请输入关键词" clearable>
                  <el-button slot="append" :size="size" icon="el-icon-search" @click="getOrgTree" />
                </el-input>
              </el-form-item>
            </el-form>
            <el-tree ref="tree" :data="treeList" node-key="id" :props="defaultProps" @node-click="nodeClick"
              :highlight-current="true" :load="loadNode" lazy>
            </el-tree>
          </div>
          <div v-show="!isShowOrg">
            <el-form ref="tagSearchForm" :inline="true" :model="tagSearchForm" :size="size">
              <el-form-item prop="keyword">
                <el-input v-model="tagSearchForm.keyword" placeholder="请输入关键词" clearable>
                  <el-button slot="append" :size="size" icon="el-icon-search" @click="getTagList" />
                </el-input>
              </el-form-item>
            </el-form>
            <el-tree ref="tag-tree" :data="tagList" :props="tagProps" :highlight-current="true" @node-click="handleTagClick"></el-tree>
          </div>
        </div>
        <div class="right">
          <div class="transfer">
            <div class="origin-box">
              <div class="title">
                所有人员
              </div>
              <div class="user-search">
                <el-input class="search" :size="size" v-model="searchForm.keyword"
                  placeholder="请输入姓名" clearable>
                  <el-button slot="append" :size="size" icon="el-icon-search" @click="getUserList" />
                </el-input>
              </div>
              <div class="checkbox-container">
                <el-checkbox class="checkbox-all-item" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <el-checkbox-group v-model="selectedList">
                  <el-checkbox class="checkbox-item" :label="item.id" v-for="(item, index) in tableList"
                               :key="index"
                    @change="selsChange(item, arguments)">
                    {{item.realName}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div class="selected-box">
              <div class="title">
                已分配人员
              </div>
              <ul class="selected">
                <li class="selected-item" v-for="(item, index) in selectedDataList" :key="index">
                  <span>{{item.realName}}</span>
                  <span class="el-icon-close selected-icon" @click="deleteSelect(index)"></span>
                </li>
              </ul>
            </div>
          </div>
          <div class="page">
            <el-pagination @current-change="pageChange" :current-page.sync="searchForm.page"
              :page-size="searchForm.limit" layout="total, prev, pager, next" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="closeDialog">取消</el-button>
        <el-button type="primary" :size="size" @click="choose">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import api from '@/utils/api.js'
  export default {
    name: 'UserDialogSelect',
    components: {

    },
    props: {
      isDialogUserShow: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        isDialogShow: false,
        treeSearchForm: {
          parentId: 0,
          keyword: ''
        },
        tagSearchForm: {
          keyword: ''
        },
        treeList: [],
        tableList: [],
        selectedList: [],
        selectedDataList: [],
        defaultProps: {
          children: 'children',
          label: 'fullName',
          isLeaf: 'leaf'
        },
        tagProps: {
          children: 'children',
          label: 'name',
          isLeaf: 'leaf'
        },
        searchForm: {
          stat: true,
          status: 1,
          keyword: '',
          page: 1,
          limit: 10,
          companyId: '',
          ancestors: ''
        },
        total: 0,
        activeTabName: 'org',
        tagList: [],
        checkAll: false,
        currentAllList: [],
        // currentSelectList: []
      }
    },
    computed: {
      ...mapGetters(['size', 'closeOnclickModal']),
      isShowOrg () {
        return this.activeTabName === 'org'
      }
    },
    watch: {
      isDialogUserShow (newValue) {
        this.isDialogShow = newValue
        if (this.tableList.length <= 0) {
          this.getUserList()
          this.getAllUserList().then((data) => {
            this.currentAllList = data
            // this.checkAll = this.currentSelectList.length === this.currentAllList.length
          })
        }
        /*if (this.tagList.length <= 0) {
          this.getTagList()
        }*/
      }
    },
    methods: {
      // 人员全选处理
      handleCheckAllChange() {
        if (this.checkAll) {
          const params = Object.assign({}, this.searchForm, {
            limit: -1
          })
          this.$store.commit("app/SET_LOADING_STATE", true)
          this.getAllUserList().then(data => {
            if (data) {
              const seletedIdArr = this.selectedDataList.map(item => {
                return item.id
              })
              data.forEach(item => {
                if (!seletedIdArr.includes(item.id)) {
                  this.selectedDataList.push(item)
                }
              })
              this.currentAllList = data.slice()
              // this.currentSelectList = data.slice()
              this.selectedList = this.selectedDataList.map(item => {
                return item.id
              })
            }
          })
        } else {
          const seletedIdArr = this.currentAllList.map(item => {
            return item.id
          })
          this.selectedDataList = this.selectedDataList.filter(item => {
            if (!seletedIdArr.includes(item.id)) {
              return item
            }
          })
          this.selectedList = this.selectedDataList.map(item => {
            return item.id
          })
          this.currentAllList = []
          // this.currentSelectList = []
        }
      },
      // 标签点击
      handleTabsClick () {

      },
      // 选择改变值
      selsChange (item, data) {
        const seletedIdArr = this.selectedDataList.map(item => {
          return item.id
        })
        if (!seletedIdArr.includes(item.id) && data[0]) {
          this.selectedDataList.push(item)
          // this.currentSelectList.push(item)
        }
        this.selectedDataList.forEach((value, i) => {
          if (value.id === item.id && !data[0]) {
            this.checkAll = false
            this.selectedDataList.splice(i, 1)
          }
        })
        // this.currentSelectList.forEach((value, i) => {
        //   if (value.id === item.id && !data[0]) {
        //     this.currentSelectList.splice(i, 1)
        //   }
        // })
        // this.checkAll = this.currentSelectList.length === this.currentAllList.length
      },
      // 当前页数改变的回调
      pageChange() {
        this.getUserList()
      },
      deleteSelect(index) {
        this.selectedList.splice(index, 1)
        this.selectedDataList.splice(index, 1)
      },
      closeDialog () {
        this.$emit('update:isDialogUserShow', false)
      },
      handleTagClick (data) {
        this.searchForm.tagId = data.id
        this.searchForm.keyword = ''
        this.searchForm.companyId = ''
        this.searchForm.ancestors = ''
        this.searchForm.page = 1
        this.currentAllList = []
        // this.currentSelectList = []
        this.checkAll = false
        this.getUserList()
      },
      nodeClick(data) {
        this.searchForm.companyId = data.id
        this.searchForm.ancestors = data.ancestors
        this.searchForm.keyword = ''
        this.searchForm.page = 1
        this.searchForm.tagId = ''
        this.currentAllList = []
        // this.currentSelectList = []
        this.checkAll = false
        this.getUserList()
      },
      // 获取标签列表
      getTagList() {
        const params = this.tagSearchForm
        api.getAllTags(params).then(res => {
          this.tagList = res.data
        })
      },
      getOrgTree () {
        const params = this.treeSearchForm
        api.getCompanysById(params).then(res => {
          this.treeList = res.data
        })
      },
      // 获取全部用户列表
      getAllUserList () {
        let params = Object.assign({}, this.searchForm, {
          limit: -1
        })
        return new Promise((resolve, reject) => {
          api.getUsersAjax(params).then(res => {
            resolve(res.data.list)
          })
        })
      },
      // 获取分页的用户列表
      getUserList () {
        let params = this.searchForm
        return new Promise((resolve, reject) => {
          api.getUsersAjax(params).then(res => {
            this.tableList = res.data.list
            this.total = res.data.count
            resolve(res.data)
          })
        })
      },
      loadNode (node, resolve) {
        this.treeSearchForm.parentId = node.data.id || 0
        const params = this.treeSearchForm
        api.getCompanysById(params).then(res => {
          let data = res.data.map(item => {
            item.leaf = item.leaf === 0 ? false : true
            return item
          })
          resolve(data)
        })
      },
      choose () {
        this.$emit('choose', this.selectedDataList)
        this.closeDialog()
      },
      // 暴露出去的设置方法
      setSelectedList (list) {
        if (list) {
          this.selectedList = list.map(item => {
            return item.id
          })
          this.selectedDataList = list.slice()
          // this.currentSelectList = list.slice()
        }
      }
    },
    mounted () {

    }
  }
</script>
<style lang="scss">
  .user-choose-dialog {
    .el-dialog {
      width: 70%;
      min-width: 900px;

      .el-dialog__body {
        padding-top: 20px;
        padding-bottom: 20px;
      }
    }

    .choose-dialog-content {
      display: flex;
      height: 500px;

      .left {
        padding-right: 15px;
        border-right: 1px solid #dedede;
        overflow: auto;
      }

      .user-search {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        .search{
          width: 90%;
        }
      }

      .right {
        padding: 0 10px 0 15px;
        flex-grow: 1;
        // overflow: auto;

        .transfer {
          display: flex;
          overflow: auto;

          overflow: hidden;
          .origin-box {
            width: 200px;
            border: 1px solid #ebeef5;
            border-radius: 6px;
            overflow: hidden;
            margin-right: 20px;
            .checkbox-container{
              height: 365px;
            }
            .checkbox-all-item{
              display: block;
              margin-right: 15px;
              margin-left: 15px;
              margin-top: 12px;
              padding: 0 0 5px 0;
              border-bottom: 1px solid #eee;
            }
            .el-checkbox-group {

              // overflow: auto;

              .checkbox-item {
                display: block;
                margin-right: 0px;
                margin-top: 12px;
                padding: 0 15px;
                margin-left: 0;
                &:first-child {
                  margin-top: 12px;
                }
              }
            }
          }

          .selected-box {
            flex-grow: 1;
            border: 1px solid #ebeef5;
            border-radius: 6px;

            .selected {
              height: 415px;
              padding: 0 15px 0 15px;
              overflow: auto;

              .selected-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 15px;
                &:last-child{
                  margin-bottom: 15px;
                }

                .selected-icon {
                  cursor: pointer;
                  font-size: 16px;
                }
              }
            }
          }

          .title {
            width: 100%;
            background: #f5f7fa;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ebeef5;
            box-sizing: border-box;
            color: #303133;
            padding: 0 18px;
          }
        }

        .page {
          margin-top: 15px;
        }
      }
    }
  }
</style>
